<template>
	<view class="page">
		<!-- 头部 - 仅在APP环境显示 -->
		<!-- #ifdef APP-PLUS -->
		<view class="header">
			<view class="header-content">
				<view class="back-btn" @click="$jump.navigateBack()">
					<u-icon name="arrow-left" color="#333333" size="42"></u-icon>
				</view>
				<view class="title">消息中心</view>
				<view class="placeholder"></view>
			</view>
		</view>
		<!-- #endif -->

		<!-- 客服联系区域 -->
		<view class="service-section">
			<view class="service-card" @click="contactService">
				<view class="service-left">
					<image src="https://www.shuyunpt.com/uploads/image/20250712/1752297731153208.png" class="service-avatar"></image>
					<view class="service-info">
						<text class="service-name">在线客服</text>
						<text class="service-desc">专业客服为您解答问题</text>
					</view>
				</view>
				<view class="service-right">
					<!-- 未读消息数量 -->
					<view v-if="serviceUnreadCount > 0" class="service-unread-badge">
						{{serviceUnreadCount}}
					</view>
					<view class="arrow-container">
						<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 系统消息模板 -->
		<view class="system-message-section">
			<view class="system-message" @click="goToSystemMessages">
				<view class="system-message-content">
					<view class="system-message-header">
						<text class="system-message-title">{{systemMessageTitle}}</text>
						<text class="system-message-time">{{systemMessageTime}}</text>
					</view>
					<view class="system-message-body">
						<text class="system-message-detail">{{systemMessageDetail}}</text>
					</view>
				</view>
				<!-- 新消息红点 -->
				<view v-if="hasNewSystemMessage" class="red-dot"></view>
			</view>
		</view>

		<!-- 消息列表 -->
		<view class="message-section">
			<view class="section-title">消息列表</view>
			<view class="list-item" v-for="(item,index) in users" :key="index" @click="connect(item)">
				<view class="avatar">
					<view class="unread-badge" v-if="item.notice_num">{{item.notice_num}}</view>
					<image :src="item.avatar" mode="widthFix"></image>
				</view>
				<view class="content">
					<view class="title">
						<text class="name">{{ item.username }}</text>
						<text class="time">{{formatTime(item.updated_at)}}</text>
					</view>
					<view class="txt">{{item.content}}</view>
				</view>
			</view>
			
			<!-- 空状态 -->
			<view v-if="users.length === 0 && !isLoading" class="empty-state">
				<view class="empty-text">暂无会话</view>
				<view class="empty-desc">您还没有任何聊天会话~</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				users: [],
				isLoading: false,
				// 系统消息相关
				systemMessageTitle: '系统通知',
				systemMessageDetail: '暂无系统消息！',
				systemMessageTime: '',
				hasNewSystemMessage: false,
				// 客服消息相关
				serviceUnreadCount: 0
			};
		},
		onLoad(){
			// 设置页面标题
			// #ifdef MP-WEIXIN
			uni.setNavigationBarTitle({
				title: '消息中心'
			});
			// #endif
		},
		
		onShow(){
			// 每次页面显示时刷新数据
			// 检查登录状态，如果未登录则不调用接口
			if (this.$store.state.loginStatic) {
				// 避免重复请求，如果正在加载中则不重复调用
				if (!this.isLoading) {
					this.getList()
					// 获取系统消息
					this.getSystemMessage()
					//获取客服消息
					this.getAdminMessage()
				}
			}
		},
		
		onTabItemTap(){
			// tabBar 页面被点击时刷新数据
			// 检查登录状态，如果未登录则不调用接口
			if (this.$store.state.loginStatic) {
				// 避免重复请求，如果正在加载中则不重复调用
				if (!this.isLoading) {
					this.getList()
					// 获取系统消息
					this.getSystemMessage()
					//获取客服消息
					this.getAdminMessage()
				}
			}
		},
		onReady() {
			// 微信小程序环境下，确保页面内容不被状态栏和悬浮按钮遮挡
			// #ifdef MP-WEIXIN
			// 获取系统信息，动态调整顶部间距
			uni.getSystemInfo({
				success: (res) => {
					console.log('系统信息:', res);
					// 可以根据状态栏高度和悬浮按钮位置动态调整样式
					// 悬浮按钮通常在状态栏下方，需要额外间距
				}
			});
			// #endif
		},
		onPullDownRefresh() {
			// 检查登录状态，如果未登录则不调用接口
			if (this.$store.state.loginStatic) {
				this.getList();
				this.getSystemMessage();
				this.getAdminMessage();
			} else {
				uni.stopPullDownRefresh();
			}
		},
		methods: {
			async getList(){
				try {
					this.isLoading = true;
					this.$hint.showLoading('加载中...');
					
					const res = await this.$service({
						url:"/api/member.message/getMessageList"
					})
					console.log(res);
					this.users = res.data || [];
					
					this.$hint.hideLoading();
				} catch (error) {
					this.$hint.hideLoading();
					console.error('获取消息列表失败:', error);
					this.$hint.desc('获取消息列表失败');
				} finally {
					this.isLoading = false;
					uni.stopPullDownRefresh();
				}
			},
			async contactService(){
				console.log(this.orderNo);
				const res = await this.$service({
					url:"/api/member.message/startServiceChat",
				})
				console.log(res);
				uni.navigateTo({
					url:`/pages/notice/message?name=客服&message_id=${res.data.message_id}`
				})
			},
			
			// 格式化时间
			formatTime(timeStr) {
				if (!timeStr) return '';
				
				const now = new Date();
				const time = new Date(timeStr);
				const diff = now - time;
				
				// 小于1分钟
				if (diff < 60000) {
					return '刚刚';
				}
				// 小于1小时
				if (diff < 3600000) {
					return Math.floor(diff / 60000) + '分钟前';
				}
				// 小于24小时
				if (diff < 86400000) {
					return Math.floor(diff / 3600000) + '小时前';
				}
				// 小于7天
				if (diff < 604800000) {
					return Math.floor(diff / 86400000) + '天前';
				}
				// 超过7天显示具体日期
				return `${time.getMonth() + 1}-${time.getDate()}`;
			},
			
			connect(item) {
				uni.navigateTo({
					url:`/pages/notice/message?name=${item.username}&message_id=${item.message_id}`
				})
			},
			
			// 跳转到系统消息列表
			goToSystemMessages() {
				uni.navigateTo({
					url: '/pages/notice/system-messages'
				});
			},
			async getAdminMessage(){
				try {
					const res = await this.$service({
						url: '/api/member.message/getAdminMessage',
						method: 'GET'
					});
					
					if (res.code === 1) {
						// 设置客服未读消息数量
						this.serviceUnreadCount = res.data.notice_num || 0;
					}else{
						this.serviceUnreadCount = 0;
					}
				} catch (error) {
					console.error('获取消息失败:', error);
					this.serviceUnreadCount = 0;
				}
			},
			// 获取系统消息
			async getSystemMessage() {
				try {
					const res = await this.$service({
						url: '/api/member.message/getNewSystemMessage',
						method: 'GET'
					});
					
					if (res.code === 1 && res.data) {
						this.systemMessageTitle = '系统通知';
						if(res.data.read_status == 0)
						{
							this.systemMessageDetail =  res.data.title;
							this.hasNewSystemMessage = true
						}
						this.systemMessageTime = this.formatTime(res.data.created_at);
					}
				} catch (error) {
					console.error('获取系统消息失败:', error);
					// 使用默认数据
					this.systemMessageTime = this.formatTime(new Date());
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background: #f5f5f5;
		padding-bottom: 40rpx;
		/* 兼容不同平台 */
		box-sizing: border-box;
	}
	
	/* 兼容不同平台的通用样式 */
	/* #ifdef APP-PLUS */
	/* APP平台特定样式 */
	.page {
		/* 防止内容被状态栏遮挡 */
		padding-top: var(--status-bar-height);
	}
	/* #endif */
	
	/* #ifdef MP-WEIXIN */
	/* 微信小程序特定样式 */
	.page {
		/* 微信小程序页面背景 */
		background: #f5f5f5;
		/* 微信小程序有导航栏标题，内容从导航栏下方开始，确保在悬浮按钮下方 */
		/* 确保内容不被状态栏和悬浮按钮遮挡 */
		box-sizing: border-box;
	}
	
	/* 微信小程序下客服区域优化 */
	.service-section {
		margin-bottom: 40rpx;
		/* 确保客服区域在悬浮按钮下方有足够的安全距离 */
		margin-top: 40rpx;
	}
	
	/* 微信小程序下消息列表区域优化 */
	.message-section {
		padding-top: 20rpx;
	}
	/* #endif */
	
	/* 头部样式 */
	.header {
		background: #ffffff;
		padding: 20rpx 0;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 20rpx;
		/* 兼容APP状态栏 */
		/* #ifdef APP-PLUS */
		padding-top: calc(20rpx + var(--status-bar-height));
		/* #endif */
	}
	
	.header-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;
	}
	
	.back-btn {
		padding: 10rpx;
		/* 兼容不同平台的点击区域 */
		min-width: 60rpx;
		min-height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		/* 兼容不同平台的字体 */
		/* #ifdef APP-PLUS */
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
		/* #endif */
	}
	
	.placeholder {
		width: 60rpx;
	}
	
	/* 客服联系区域 */
	.service-section {
		padding: 0 40rpx;
		margin-bottom: 30rpx;
		/* 兼容不同平台的间距 */
		/* #ifdef APP-PLUS */
		margin-bottom: 30rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		margin-bottom: 40rpx;
		/* #endif */
	}
	
	.service-card {
		background: linear-gradient(135deg, #5C65FF 0%, #4A52E8 100%);
		border-radius: 20rpx;
		padding: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0 4rpx 20rpx rgba(92, 101, 255, 0.3);
		transition: all 0.3s ease;
		/* 兼容不同平台的点击效果 */
		/* #ifdef APP-PLUS */
		cursor: pointer;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		position: relative;
		/* #endif */
		
		/* 兼容不同平台的点击状态 */
		/* #ifdef APP-PLUS */
		&:active {
			transform: scale(0.98);
			box-shadow: 0 2rpx 10rpx rgba(92, 101, 255, 0.2);
		}
		/* #endif */
		
		/* #ifdef MP-WEIXIN */
		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(255, 255, 255, 0.1);
			opacity: 0;
			transition: opacity 0.2s;
			border-radius: 20rpx;
		}
		
		&:active::after {
			opacity: 1;
		}
		/* #endif */
	}
	
	.service-left {
		display: flex;
		align-items: center;
		flex: 1;
	}
	
	.service-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 25rpx;
		border: 3rpx solid rgba(255, 255, 255, 0.3);
	}
	
	.service-info {
		display: flex;
		flex-direction: column;
	}
	
	.service-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #ffffff;
		margin-bottom: 8rpx;
	}
	
	.service-desc {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
	}
	
	.service-right {
		padding: 10rpx;
		position: relative;
		display: flex;
		align-items: center;
		gap: 15rpx;
	}
	
	.service-unread-badge {
		background: #ff4757;
		color: #ffffff;
		font-size: 20rpx;
		min-width: 32rpx;
		height: 32rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 8rpx;
		font-weight: bold;
		box-shadow: 0 2rpx 8rpx rgba(255, 71, 87, 0.3);
		animation: pulse 2s infinite;
		z-index: 1;
	}
	
	.arrow-container {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 5rpx;
	}
	
	/* 系统消息区域 */
	.system-message-section {
		padding: 0 40rpx;
		margin-bottom: 30rpx;
		/* 兼容不同平台的间距 */
		/* #ifdef APP-PLUS */
		margin-bottom: 30rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		margin-bottom: 40rpx;
		/* #endif */
	}
	
	.system-message {
		position: relative;
		background: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
		/* 兼容不同平台的点击效果 */
		/* #ifdef APP-PLUS */
		cursor: pointer;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		position: relative;
		/* #endif */
		
		/* 兼容不同平台的点击状态 */
		/* #ifdef APP-PLUS */
		&:active {
			transform: scale(0.98);
			background: #f8f9fa;
		}
		/* #endif */
		
		/* #ifdef MP-WEIXIN */
		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.05);
			opacity: 0;
			transition: opacity 0.2s;
			border-radius: 16rpx;
		}
		
		&:active::after {
			opacity: 1;
		}
		/* #endif */
	}
	
	.system-message-content {
		display: flex;
		flex-direction: column;
	}
	
	.system-message-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15rpx;
	}
	
	.system-message-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}
	
	.system-message-time {
		font-size: 24rpx;
		color: #999999;
	}
	
	.system-message-body {
		display: flex;
		align-items: center;
	}
	
	.system-message-detail {
		font-size: 28rpx;
		color: #666666;
		line-height: 1.4;
		flex: 1;
	}
	
	/* 新消息红点 */
	.red-dot {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		width: 16rpx;
		height: 16rpx;
		background: #ff4757;
		border-radius: 50%;
		animation: pulse 2s infinite;
	}
	
	@keyframes pulse {
		0% {
			transform: scale(1);
			opacity: 1;
		}
		50% {
			transform: scale(1.2);
			opacity: 0.7;
		}
		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	/* 消息列表区域 */
	.message-section {
		padding: 0 40rpx;
		/* 兼容不同平台的间距 */
		/* #ifdef APP-PLUS */
		padding: 0 40rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		padding: 10rpx 40rpx 0 40rpx;
		/* #endif */
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 30rpx;
		padding-left: 10rpx;
		/* 兼容不同平台的标题间距 */
		/* #ifdef APP-PLUS */
		margin-bottom: 30rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		margin-bottom: 40rpx;
		margin-top: 10rpx;
		/* #endif */
	}
	
	.list-item {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
		/* 兼容不同平台的点击效果 */
		/* #ifdef APP-PLUS */
		cursor: pointer;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		position: relative;
		/* #endif */
		
		/* 兼容不同平台的点击状态 */
		/* #ifdef APP-PLUS */
		&:active {
			transform: scale(0.98);
			background: #f8f9fa;
		}
		/* #endif */
		
		/* #ifdef MP-WEIXIN */
		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.05);
			opacity: 0;
			transition: opacity 0.2s;
			border-radius: 16rpx;
		}
		
		&:active::after {
			opacity: 1;
		}
		/* #endif */
		
		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-right: 25rpx;
			position: relative;
			
			.unread-badge {
				position: absolute;
				top: -8rpx;
				right: -8rpx;
				background: #ef5656;
				color: #ffffff;
				font-size: 20rpx;
				min-width: 32rpx;
				height: 32rpx;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 8rpx;
				font-weight: bold;
			}
			
			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		
		.content {
			flex: 1;
			
			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 15rpx;
				
				.name {
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
				}
				
				.time {
					font-size: 24rpx;
					color: #999999;
				}
			}
			
			.txt {
				font-size: 26rpx;
				color: #666666;
				line-height: 1.4;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
	}
	
	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 150rpx 0;
		text-align: center;
	}
	
	.empty-icon {
		width: 240rpx;
		height: 240rpx;
		margin-bottom: 40rpx;
		opacity: 0.6;
	}
	
	.empty-text {
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		margin-bottom: 20rpx;
	}
	
	.empty-desc {
		font-size: 28rpx;
		color: #999999;
		line-height: 1.5;
	}
	
	/* 加载状态 */
	.loading-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
	}
	
	.loading-text {
		font-size: 28rpx;
		color: #999999;
		margin-top: 20rpx;
	}
</style>
